<template>
    <div class="login-index bg-fff">
      <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="$router.go(-1)"/>
      <div class="mt-5 pt-20">
          <!--手机号码 -->
          <div class="handset flex jc-sb pb-5" style="padding: 0 10%;">
              <input
                  class="f14 input-no-border"
                  type="text"
                  v-model="phone"
                  placeholder="请输入手机号"
              />
              <input
                class="f14 bg-fff input-no-border"
                type="button"
                :value="timer > 0 ? `${timer}秒后重试` : '获取验证码'"
                @click="timer === 0 ? getCode() : null"
                :disabled="timer > 0"
            />
          </div>
          <!--验证码 -->
          <div class="handset flex jc-sb mt-20 pb-5" style="padding: 0 10%;">
              <input v-model="smsCode" class="f14 input-no-border" placeholder="请输入验证码"/>
          </div>
          <!--登录 -->
          <div class="mt-20" style="text-align: center;">
              <van-button style="width:80%" type="danger" @click="login">短信登录</van-button>
          </div>
      </div>
    </div>
  </template>

<script>
import request from '../../utils/request'
export default {
    data(){
        return{
            phone:'13000000000',
            smsCode:'',
            timer: 0 // 倒计时时间
        }
    },
    
    methods:{
        getCode(){
            let params = {
            phone:this.phone
        }
            request.get('/user/getSmsCode',{params}).then(res =>{
                this.smsCode = res.smsCode;
                this.startTimer(); // 启动倒计时
            })
        },
        login(){
            let data = {
            phone: this.phone,
            smsCode: this.smsCode
            }
            request.post('/user/login',data).then(res=>{
                this.$store.commit( 'set_phone' ,this.phone);
                this.$store.commit( 'set_token' ,res.result.token);
                this.$router.push('/my')
            });
        },
        startTimer() {
            this.timer = 60; // 设置倒计时为60秒
            const interval = setInterval(() => {
                if (this.timer > 0) {
                    this.timer--;
                } else {
                    clearInterval(interval); // 停止倒计时
                }
            }, 1000);
        }
    }
}
</script>

<style lang="less">
.input-no-border {
  border: none; /* 移除边框 */
  outline: none; /* 移除焦点时的边框 */
  background-color: transparent; /* 设置背景透明 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
}
</style>